<template>
  <div class="card-wrapper">
    <common-back :content="title"></common-back>
    <ul class="list">
      <li class="nav-item"
          border-bottom-1px>
        <div class="title">卡号：</div>
        <input type="text"
               placeholder="请输入卡号"
               v-model="cardNum">
      </li>
      <li class="nav-item"
          border-bottom-1px>
        <div class="title">姓名：</div>
        <input type="text"
               placeholder="请输入姓名"
               v-model="userName">
      </li>
      <li class="nav-item"
          border-bottom-1px>
        <div class="title">手机号：</div>
        <input type="text"
               placeholder="请输入手机号"
               v-model="phone">
        <div class="code"
             @click=" flag && handleGetCode()"><span v-show="!flag && code < 10">0</span>{{code}} <span v-show="!flag">秒</span></div>
      </li>
      <li class="nav-item"
          border-bottom-1px>
        <div class="title">验证码：</div>
        <input type="text"
               placeholder="请输入验证码"
               v-model="authCode">
      </li>
    </ul>
    <common-button :content="content"
                   @submit="handleSubmit" v-if="screenHeightNoChange"></common-button>
  </div>
</template>
<script>
import CommonButton from 'common/button/button'
import CommonBack from 'common/headerBack/back'
export default {
  name: 'walletCard',
  components: {
    CommonBack,
    CommonButton
  },
  data () {
    return {
      title: '我的银行卡',
      cardNum: '',
      userName: '',
      phone: '',
      authCode: '',
      content: '提交',
      code: '获取验证码',
      timer: null,
      flag: true,
      screenHeightNoChange: true,
      oldFullHeight: document.documentElement.clientHeight
    }
  },
  methods: {
    handleSubmit () {
      const flag = this.check()
      if (flag) {
        this.submit()
      }
    },
    handleGetCode () {
      const reg = /^1[3456789]?\d{9}/
      const CODE = '获取验证码'
      const code = this.code
      if (!reg.test(this.phone)) {
        this.$tip('手机号码格式不正确')
        return false
      }
      if (code === CODE) {
        this.code = 60
        this.flag = false
        this.countDown()
        this.getCode()
      }
    },
    getCode () {
      this.$api.common.message({ mobile: this.phone })
        .then(this.getCodeSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    getCodeSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        console.log(res)
        this.$tip(res.msg)
      } else if (res.code === this.$api.CODE_ERR) {
        this.$tip(res.msg)
        this.code = '获取验证码'
      }
    },
    submit () {
      this.$api.me.card({ bank_no: this.cardNum, true_name: this.userName, member_phone: this.phone, code: this.authCode })
        .then(this.submitSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    submitSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        this.$tip(res.msg)
        this.$router.push({
          path: '/me/wallet'
        })
      } else if (res.code === this.$api.CODE_ERR) {
        console.log(res)
        this.$tip(res.msg)
      }
    },
    check () {
      const cardReg = /^([1-9]{1})(\d{14}|\d{18})$/
      const phone = /^1[3456789]?\d{9}/
      if (!cardReg.test(this.cardNum)) {
        this.$tip('输入卡号不正确')
        return false
      } else if (!phone.test(this.phone)) {
        this.$tip('输入手机不正确')
        return false
      } else if (this.userName === '') {
        this.$tip('用户名不能为空')
        return false
      } else if (this.authCode === '') {
        this.$tip('验证码不能为空')
        return false
      } else {
        return true
      }
    },
    countDown () {
      if (this.timer) clearTimeout(this.timer)
      if (this.code > 0) {
        this.code = this.code - 1
        setTimeout(() => {
          this.countDown()
        }, 1000)
      } else {
        clearTimeout(this.timer)
        this.code = '获取验证码'
        this.flag = true
      }
    }
  },
  mounted () {
    const self = this
    window.onresize = () => {
      if (self.oldFullHeight) {
        self.screenHeightNoChange = document.documentElement.clientHeight === self.oldFullHeight
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.card-wrapper
  initPosition()
  padding-top 88px
  box-sizing border-box
  background-color $common_bgc
  z-index 30

  .list
    width 100%
    margin-top 10px

    .nav-item
      width 100%
      height 109px
      display flex
      align-items center
      position relative

      &:nth-of-type(1) .title
        margin-right 32px

      &:nth-of-type(2) .title
        margin-right 32px

      .title
        padding-left 20px
        padding-right 20px
        height 100%
        line-height 109px
        font-size $shop_name
        font-weight 400
        color $footer_bgc

      input
        flex 1
        padding-right 10px
        border none
        height 100%
        display flex
        align-items center
        font-size $shop_name
        font-weight 400
        color $location
        background-color #fff

      .code
        position absolute
        top 50%
        right 20px
        transform translateY(-50%)
        padding-left 20px
        box-sizing border-box
        height 100%
        line-height 109px
        font-size $shop_name
        font-weight 400
        color $location
</style>
